<template>
    <el-main>
        <!-- 条件查询 -->
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" size="small">新增</el-button>
        <!-- 数据表格 -->
        <el-table :data="menuList" :height="tableHeight" style="margin-top: 10px;" row-key="id" border
            default-expand-all stripe :tree-props="{ children: 'children' }">
            <el-table-column prop="label" label="菜单名称" />
            <el-table-column prop="type" label="菜单类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
                    <el-tag v-else-if="scope.row.type == '1'" type="success" size="normal">菜单</el-tag>
                    <el-tag v-else-if="scope.row.type == '2'" type="warning" size="normal">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="icon" label="菜单图标">
                <template slot-scope="scope">
                    <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')"></i>
                    <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="路由名称" />
            <el-table-column prop="path" label="路由地址" />
            <el-table-column prop="url" label="组件路径" />
            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit-outline"
                        @click="editMenu(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete-solid"
                        @click="deleteMenu(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增菜单对话框  -->
        <system-dialog :title="menuDialog.title" :visible.sync="menuDialog.visible" :width="menuDialog.width"
            :height="menuDialog.height" @onClose="onClose" @onConfirm="onConfirm">
            <div slot="content">
                <el-form :model="menu" ref="menuForm" :rules="rules" label-width="80px" size="small" :inline="true">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="菜单类型" prop="type">
                                <el-radio-group v-model="menu.type">
                                    <el-radio :label="0">目录</el-radio>
                                    <el-radio :label="1">菜单</el-radio>
                                    <el-radio :label="2">按钮</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="所属菜单" prop="parentName">
                        <el-input v-model="menu.parentName" :readonly="true"
                            @click.native="selectParentMenu()"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="label">
                        <el-input v-model="menu.label"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单图标" prop="icon">
                        <my-icon @selecticon="setIcon" ref="child"></my-icon>
                    </el-form-item>
                    <el-form-item v-if="menu.type == 1" label="路由名称" prop="name">
                        <el-input v-model="menu.name"></el-input>
                    </el-form-item>
                    <el-form-item v-if="menu.type != 2" label="路由地址" prop="path">
                        <el-input v-model="menu.path"></el-input>
                    </el-form-item>
                    <el-form-item v-if="menu.type == 1" label="组件地址" prop="url">
                        <el-input v-model="menu.url"></el-input>
                    </el-form-item>
                    <el-form-item label="权限字段" prop="code">
                        <el-input v-model="menu.code"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单序号" prop="orderNum">
                        <el-input v-model="menu.orderNum"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </system-dialog>
        <!-- 选择所属菜单弹框 -->
        <system-dialog :title="parentDialog.title" :width="parentDialog.width" :height="parentDialog.height"
            :visible="parentDialog.visible" @onClose="onParentClose" @onConfirm="onParentConfirm">
            <div slot="content">
                <el-tree style="font-size: 14px" ref="parentTree" :data="parentMenuList" node-key="id"
                    :props="defaultProps" empty-text="暂无数据" :show-checkbox="false" default-expand-all
                    :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick">
                    <div class="customer-tree-node" slot-scope="{ node, data }">
                        <!-- 长度为0说明没有下级 -->
                        <span v-if="data.children.length == 0">
                            <i class="el-icon-document" style="color: #8c8c8c; font-size: 18px" />
                        </span>
                        <span v-else @click.stop="openBtn(data)">
                            <svg-icon v-if="data.open" icon-class="add-s" />
                            <svg-icon v-else icon-class="sub-s" />
                        </span>
                        <span style="margin-left: 3px">{{ node.label }}</span>
                    </div>
                </el-tree>
            </div>
        </system-dialog>
    </el-main>
</template>

<script>
//导入menu.js脚本文件
import menuApi from '@/api/menu.js'
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
//导入自定义图标组件
import MyIcon from '@/components/system/MyIcon.vue'
export default {
    name: 'menulist',
    components: {
        SystemDialog,
        MyIcon
    },
    data() {
        return {
            menuList: [], //数据列表
            tableHeight: 0, //表格高度
            //新增或编辑弹框属性
            menuDialog: {
                title: "",
                visible: false, //是否显示
                width: 630,
                height: 270,
            },
            //菜单属性
            menu: {
                id: "",
                type: "",
                parentId: "",
                parentName: "",
                label: "",
                icon: "",
                name: "",
                path: "",
                url: "",
                code: "",
                orderNum: "",
            },
            //表单验证规则
            rules: {
                type: [{
                    required: true,
                    trigger: "change",
                    message: "请选择菜单类型"
                }],
                parentName: [{
                    required: true,
                    trigger: "change",
                    message: "请选择所属菜单"
                }],
                label: [{
                    required: true,
                    trigger: "blur",
                    message: "请输入菜单名称"
                }],
                name: [{
                    required: true,
                    trigger: "blur",
                    message: "请输入路由名称"
                }],
                path: [{
                    required: true,
                    trigger: "blur",
                    message: "请输入路由路径"
                }],
                url: [{
                    required: true,
                    trigger: "blur",
                    message: "请输入组件路径"
                }],
                code: [{
                    required: true,
                    trigger: "blur",
                    message: "请输入权限字段"
                }],
            },
            //上级菜单弹框属性
            parentDialog: {
                title: '选择所属菜单',
                width: 280,
                height: 450,
                visible: false
            },
            //树属性定义
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            parentMenuList: [], //所属菜单列表

        }
    },
    //初始化时调用
    created() {
        //调用查询菜单列表方法
        this.search();
    },
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 180;
        });
    },
    methods: {

        //查询菜单列表
        async search() {
            let res = await menuApi.getMenuList();
            //判断是否成功
            if (res.success) {
                //赋值
                this.menuList = res.data;
            }

        },
        //打开新增菜单对话框
        openAddWindow() {
            this.$resetForm("menuForm", this.menu); //清空表单数据
            this.menuDialog.title = "新增菜单"; //设置窗口标题
            this.menuDialog.visible = true; //显示窗口
            this.$nextTick(() => {
                this.$refs["child"].userChooseIcon = "";//清空菜单图标
            })
        },
        //给icon绑定的点击事件
        setIcon(icon) {
            this.menu.icon = icon;
        },
        //关闭对话框
        onClose() {
            this.menuDialog.visible = false; //关闭窗口
        },
        //确认新增对话框
        onConfirm() {
            //表单验证
            this.$refs.menuForm.validate(async (valid) => {
                if (valid) {
                    let res = null;
                    ////判断菜单ID是否有数据，如果部门ID为空，则表示新增，否则就是修改
                    if (this.menu.id == '') {
                        //发送添加请求
                        res = await menuApi.addMenu(this.menu);
                    } else {
                        //发送修改请求
                        res = await menuApi.updateMenu(this.menu);
                    }
                    if (res.success) {
                        this.$message.success(res.message);
                        //刷新
                        this.search();
                        this.menuDialog.visible = false;
                    } else {
                        this.$message.error(res.message);
                    }
                }
            });
        },
        //所属菜单
        async selectParentMenu() {
            //显示窗口
            this.parentDialog.visible = true;
            //发送查询请求
            let res = await menuApi.getParentMenuList();
            //判断是否成功
            if (res.success) {
                //赋值
                this.parentMenuList = res.data;
            }
        },
        /**
       * 选择所属菜单取消事件
       */
        onParentClose() {
            this.parentDialog.visible = false //关闭窗口
        },
        /**
         * 选择所属菜单确认事件
         */
        onParentConfirm() {
            this.parentDialog.visible = false //关闭窗口
        },
        /**
         * 切换图标
         * @param data
         */
        openBtn(data) {
            data.open = !data.open
            this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
        },
        /**
         * 所属菜单节点点击事件
         */
        handleNodeClick(data) {
            //所属父级菜单ID
            this.menu.parentId = data.id;
            //所属父级菜单名称
            this.menu.parentName = data.label;
        },
        //编辑菜单
        editMenu(row) {
            //数据回显
            this.$objCopy(row, this.menu);
            //设置窗口标题
            this.menuDialog.title = "编辑菜单";
            //显示编辑菜单窗口
            this.menuDialog.visible = true;
            this.$nextTick(() => {
                this.$refs["child"].userChooseIcon = row.icon; //菜单图标回显
            })


        },
        //删除菜单
        async deleteMenu(row) {
            //检查菜单下是否存在子菜单
            let result = await menuApi.checkPermission({
                id: row.id
            });
            if (!result.success) {
                //提示不能删除
                this.$message.warning(result.message);
            } else {
                //弹出确认框
                let confirm = await this.$myconfirm("确定要删除该数据吗?", "提示");
                if (confirm) {
                    let res = await menuApi.deleteById({ id: row.id });
                    if (res.success) {
                        //提示成功
                        this.$message.success(res.message);
                        //刷新
                        this.search();
                    } else {
                        //提示失败
                        this.$message.error(res.message);
                    }
                }
            }
        }
    }

}
</script>

<style lang="scss" scoped></style>